<template>
  <div style="width: 305px">
    <div class="title">
      <b></b>
      <p>在线情况</p>
    </div>
    <el-carousel height="250px" :interval="6000">
      <el-carousel-item v-for="item in chartArr" :key="item.id">
        <div :id="'online' + item.id" class="chart1"></div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
import * as Axios from "../api/myAxios";

export default {
  name: "SiteOnline",
  data() {
    return {
      chartArr: null,
    };
  },
  mounted() {
    let fun = async () => {
      await Axios.post().then((res) => {
        this.chartArr = res.data.parameter.list;
      });
      let create = (idName, num) => {
        let online = [],
          offline = [];
        Axios.post().then((res) => {
          let data = res.data.parameter.list[num].sensorList;
          let monitorName = res.data.parameter.list[num].monitorName;
          let bdArr = [],
            qxArr = [],
            ytArr = [];
          for (let i in data) {
            if (data[i].moduleEnum == "00") {
              bdArr.push(data[i]);
            } else if (data[i].moduleEnum == "02") {
              qxArr.push(data[i]);
            } else if (data[i].moduleEnum == "01") {
              ytArr.push(data[i]);
            }
          }
          let bdOnline = 0,
            bdOffline = 0,
            qxOnline = 0,
            qxOffline = 0,
            ytOnline = 0,
            ytOffline = 0;
          online = [];
          offline = [];
          for (let i in qxArr) {
            if (qxArr[i].sensorStatus == "10") {
              qxOnline++;
            } else if (qxArr[i].sensorStatus == "30") {
              qxOffline++;
            }
          }
          online.push(qxOnline);
          offline.push(qxOffline);
          for (let i in ytArr) {
            if (ytArr[i].sensorStatus == "10") {
              ytOnline++;
            } else if (ytArr[i].sensorStatus == "30") {
              ytOffline++;
            }
          }
          online.push(ytOnline);
          offline.push(ytOffline);
          for (let i in bdArr) {
            if (bdArr[i].sensorStatus == "10") {
              bdOnline++;
            } else if (bdArr[i].sensorStatus == "30") {
              bdOffline++;
            }
          }
          online.push(bdOnline);
          offline.push(bdOffline);
          let myChart = this.$echarts.init(document.getElementById(idName));
          let option = {
            title: [
              {
                text: monitorName,
                left: "center",
                textStyle: {
                  color: "#fff",
                  fontWeight: "bold",
                  fontSize: "18",
                },
              },
              {
                subtext: "北斗",
                left: "1%",
                top: "20%",
                subtextStyle: {
                  fontSize: "14",
                  color: "#fff",
                },
              },
              {
                subtext: "岩土",
                left: "1%",
                top: "40%",
                subtextStyle: {
                  fontSize: "14",
                  color: "#fff",
                },
              },
              {
                subtext: "气象",
                left: "1%",
                top: "60%",
                subtextStyle: {
                  fontSize: "14",
                  color: "#fff",
                },
              },
            ],
            tooltip: {
              trigger: "axis",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
              },
            },
            color: ["#3573FC", "#F93F00"],
            grid: {
              left: "15%",
              right: "4%",
              top: "20%",
              bottom: "20%",
              containLabel: false,
            },
            xAxis: [
              {
                type: "value",
                show: false,
                splitLine: {
                  show: false,
                },
              },
            ],
            yAxis: [
              {
                type: "category",
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                splitLine: {
                  show: false,
                },
              },
            ],
            series: [
              {
                name: "在线: ",
                type: "bar",
                stack: "总量",
                barWidth: 10,
                data: online,
                label: {
                  show: true, //开启显示
                  position: "insideTopLeft",
                  offset: [-5, -15],
                  textStyle: {
                    //数值样式
                    color: "white",
                    fontSize: 11,
                  },
                  formatter: "{a}{c}",
                },
              },
              {
                name: "掉线：",
                type: "bar",
                stack: "总量",
                barWidth: 10,
                data: offline,
                label: {
                  show: true, //开启显示
                  position: "insideTopRight",
                  offset: [10, -15], //在上方显示
                  textStyle: {
                    //数值样式
                    color: "white",
                    fontSize: 11,
                  },
                  formatter: function (a) {
                    let str;
                    if (a.value == 0) {
                      str = "";
                    } else {
                      str = "掉线:" + a.value;
                    }
                    return str;
                  },
                },
              },
            ],
          };
          myChart.clear();
          myChart.setOption(option);
        });
      };
      if (this.chartArr.length == 1) {
        create(`online${this.chartArr[0].id}`, 0);
      } else {
        for (let i = 0; i < this.chartArr.length; i++) {
          create(`online${this.chartArr[i].id}`, i);
        }
      }
    };
    fun();
    const timer = setInterval(async () => {
      await fun();
    }, 1000 * 30);
    this.$once("hook:beforeDestroy", () => {
      clearInterval(timer);
    });
  },
};
</script>

<style scoped>
#online {
  height: 250px;
  width: 300px;
}
</style>